<template>
  <div>
    <el-dialog :title="dialog.title" :visible.sync="dialogVisible" width="30%">
      <span>{{ dialog.text }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="fn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ['dialog'],
  data () {
    return {
      dialogVisible: false
    }
  },
  methods: {
    fn () {
      if (this.dialog.title === '确认删除') {
        this.$parent.del()
      } else if (this.dialog.title === '确认停用') {
        this.$parent.put(0)
      } else if (this.dialog.title === '确认启用') {
        this.$parent.put(1)
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-dialog__header {
  box-sizing: border-box;
  height: 56px;
  background: #fff;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  padding: 17px 30px 20px;
  font-weight: 700;
}
/deep/ .el-dialog__footer {
  button {
    border-radius: 20px;
    border: none;
    margin-left: 20px;
  }
  button:nth-child(1) {
    background: #f8f5f5;
    color: #332929;
  }
  button:nth-child(2) {
    background: #ffb200;
    color: #332929;
  }
}
</style>
